<template>
    <el-dialog
        class="custom-modal"
        :title="title"
        :visible.sync="show"
        append-to-body
        top="20vh"
        @open="_open"
        @close="_close"
        @closed="_afterClose"
        v-auto-focus
    >
        <div class="api-list-dialog-box">
            <div class="api-list-dialog__data-box">
                <div class="api-list-dialog__header">
                    <el-input
                        class="api-list-dialog__name"
                        placeholder="API名称"
                        maxlength="12"
                        v-model="model.name"
                    >
                    </el-input>
                    <el-input
                        class="api-list-dialog__input"
                        placeholder="API地址"
                        v-model="model.url"
                    >
                    </el-input>
                    <el-button class="api-list-dialog__btn" @click="add">新增</el-button>
                </div>
            </div>
            <div class="api-list-dialog__data-body">
                <ul class="api-list-dialog__ul">
                    <template v-for="(item,index) in apiList">
                        <li class="api-list-dialog__li"
                            :class="{ active: current && current.url === item.url }"
                            :key="item.id">
                            <div class="api-list-dialog__li-label">{{item.name || "-"}}</div>
                            <div class="api-list-dialog__li-value">{{item.url || "-"}}</div>
                            <div class="api-list-dialog__li-btn">
                                <el-button type="text" @click="sure(item, index)">切换</el-button>
                                <el-button type="text" v-if="item.delete && (current && current.url !== item.url)" @click="remove(item,index)">删除</el-button>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { apiInfoExtension } from "@/services/config";
import { Component, Vue } from "vue-property-decorator";
@Component
export default class SendRangeForm extends Vue {
    title = "API列表";
    show = false;
    ajaxLoader = false;
    ajaxIndex = 0;

    model: any = {
        url: "",
        name: ""
    };

    current: any = {};

    apiList: any[] = [
        ...apiInfoExtension.configList,
        ...apiInfoExtension.apiList
    ]

    sessionApiList: any[] = [
        ...apiInfoExtension.apiList
    ]

    async _open() {
        this.$emit("onopen");
        this.initData();
    }

    _close() {
        this.$emit("onclose");
    }

    _afterClose() {
        this.$nextTick(function() {
            this.$emit("onafterclose");
            this.$el.remove && this.$el.remove();
        });
    }

    loader(state: boolean) {
        if (state) {
            if (this.ajaxIndex === 0) this.ajaxLoader = true;
            this.ajaxIndex++;
        } else {
            setTimeout(() => {
                this.ajaxIndex--;
                if (this.ajaxIndex === 0) this.ajaxLoader = false;
            }, 300);
        }
    }

    close() {
        this.show = false;
        this.$nextTick(() => {
            this._afterClose();
        });
    }

    async initData() {
        // this.loader(true);
        // this.loader(false);
    }

    async sure(item: any) {
        this.current = item;
        this.$emit("sure", this.current);
    }

    add() {
        const { name, url } = this.model;
        if (!name) {
            this.$message.error("请输入API名称!");
            return;
        }
        if (!url) {
            this.$message.error("请输入API地址!");
            return;
        }
        const _index = this.apiList.findIndex((cur: any) => cur.url === url.trim());
        if (_index !== -1) {
            this.$message.error("API地址重复!");
            return;
        }
        if (this.sessionApiList.length >= 10) {
            this.$message.error("最多只能添加十个自定义API地址!");
            return;
        }
        const _item = {
            name: name,
            url: url.trim(),
            delete: true,
            id: +new Date()
        };
        this.apiList.push(_item);
        this.model.name = "";
        this.model.url = "";
        this.sessionApiList.push(_item);
        apiInfoExtension.apiInfo = {
            ...apiInfoExtension.apiInfo,
            list: this.sessionApiList
        };
    }

    remove(item: any) {
        const _index = this.apiList.findIndex((cur: any) => cur.url === item.url);
        const _sIndex = this.sessionApiList.findIndex((cur: any) => cur.url === item.url);
        if (_index !== -1) {
            this.apiList.splice(_index, 1);
        }
        if (_sIndex !== -1) {
            this.sessionApiList.splice(_sIndex, 1);
            apiInfoExtension.apiInfo = {
                ...apiInfoExtension.apiInfo,
                list: this.sessionApiList
            };
        }
    }
}
</script>
<style scoped lang="scss">
.custom-modal {
    margin: 0;
    & /deep/ {
        .el-dialog {
            width: 500px;
        }
        .el-dialog__body{
            padding: .1rem;
        }
    }
    .api-list-dialog-box {
        width: 100%;
        height: 4rem;
        .api-list-dialog__data-box {
            width: 100%;
            height: 0.6rem;
        }
        .api-list-dialog__data-body{
            height: calc(100% - .6rem);
            overflow: auto;
        }
        .api-list-dialog__header {
            flex: 0 0 auto;
            height: 100%;
            @include textEllipsis();
            @include flexLayout(flex, center, center);
            .api-list-dialog__name{
                flex: 0 0 1rem;
            }
            .api-list-dialog__input{
                flex: 1;
                margin: 0 .1rem;
            }
            .api-list-dialog__btn{
                flex: 0 0 auto;
            }
        }
        .api-list-dialog__body {
            flex: 1;
            height: calc(100% - 0.6rem);
            overflow: auto;
        }
        .api-list-dialog__ul {
            width: 100%;
            .api-list-dialog__li {
                padding: .2rem;
                min-height: 0.4rem;
                @include textEllipsis();
                @include flexLayout(flex, normal, center);
                cursor: pointer;
                & + .api-list-dialog__li {
                    border-top: 1px solid #eee;
                }
                &:hover {
                    background: #eee;
                }
                &.active{
                    color: #17B3A3;
                }
                .api-list-dialog__li-label{
                    flex: 0 0 1rem;
                    white-space: normal;
                    word-break: break-all;
                    font-size: .14rem;
                    line-height: 1.4;
                    padding: 0 .2rem;
                }
                .api-list-dialog__li-value{
                    flex: 1;
                    word-break: break-all;
                    font-size: .14rem;
                    line-height: 1.4;
                    white-space: normal;
                    cursor: auto;
                }
                .api-list-dialog__li-btn{
                    flex: 0 0 1rem;
                    text-align: center;
                }
            }
        }
    }
}
</style>
